<script>
  import {createEventDispatcher} from "svelte";
  let selected = 10;
  let dispatch = createEventDispatcher();
  const onChange = (e) => {
    selected = e.currentTarget.value;
    dispatch('rating-select', selected);
  };
</script>


<ul class="rating flex items-center justify-around my-6">
  <li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num1" name="rating" value="1" on:change={onChange} checked={selected===1}>
    <label for="num1" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">1</label>
  </li><li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num2" name="rating" value="2" on:change={onChange} checked={selected===2}>
    <label for="num2" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">2</label>
  </li><li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num3" name="rating" value="3" on:change={onChange} checked={selected===3}>
    <label for="num3" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">3</label>
  </li><li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num4" name="rating" value="4" on:change={onChange} checked={selected===4}>
    <label for="num4" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">4</label>
  </li><li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num5" name="rating" value="5" on:change={onChange} checked={selected===5}>
    <label for="num5" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">5</label>
  </li><li class="relative bg-white w-10 h-10 p-2 rounded-full text-sm text-center border-gray-200">
    <input type="radio" id="num6" name="rating" value="6" on:change={onChange} checked={selected===6}>
    <label for="num6" class="absolute top-0 left-0 w-10 h-10 p-2 rounded-full cursor-pointer">6</label>
  </li>

</ul>

<style>
  ul>li {
    transition: 0.3s;
    background: #f4f4f4;

  }
  ul>li:hover {
    background: #ff6a95;
    color: #fff;
  }
  [type='radio'] {
    opacity: 0;

  }
  [type='radio']:checked ~ label {
    background: #ff6a95;
    color: #ffffff;
  }
  ul>li label {
  }

</style>
